<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020/7/22
  Time: 20:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>影片排行管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/back/layuiadmin/style/admin.css" media="all">
</head>
<body>

<div class="layui-card layadmin-header">
    <div class="layui-breadcrumb" lay-filter="breadcrumb">
        <a lay-href="">主页</a>
        <a><cite>组件</cite></a>
        <a><cite>数据表格</cite></a>
        <a><cite>开启头部工具栏</cite></a>
    </div>
</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body">
                    <table class="layui-hide" id="test-table-toolbar" lay-filter="test-table-toolbar"></table>

                    <script type="text/html" id="test-table-toolbar-toolbarDemo">
                        <div class="test-table-reload-btn" style="margin-bottom: 10px;">
                            影片名称：
                            <div class="layui-inline">
                                <input class="layui-input" name="filmName" id="searchFilmName" autocomplete="off">
                            </div>
                            <div class="layui-inline">
                                <label style="width:90px" class="layui-form-label">上映时间</label>
                                <div class="layui-input-inline">
                                    <input type="text" class="layui-input" id="searchFilmReleaseTime" placeholder="yyyy-MM-dd" lay-key="1">
                                </div>
                            </div>
                            <button style="width:90px" class="layui-btn" data-type="reload" id="search" >搜索</button>
                        </div>
                    </script>
                    <script type="text/html" id="test-table-toolbar-barDemo">
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-normal layui-icon layui-icon-up" lay-event="up"></button>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-warm layui-icon layui-icon-down" lay-event="down"></button>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-danger layui-icon layui-icon-edit" lay-event="edit"></button>
                    </script>
                </div>
            </div>
        </div>
    </div>
</div>

<script src="${pageContext.request.contextPath}/back/layuiadmin/layui/layui.js"></script>
<script>
    layui.config({
        base: '${pageContext.request.contextPath}/back/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index', 'table','form','laydate'], function(){
        var admin = layui.admin
            ,table = layui.table // 表格
            ,layer = layui.layer // 弹层
            ,form = layui.form // form表单
            ,laydate = layui.laydate // 时间
            ,$=layui.$; // $

        // 时间格式

        laydate.render({
            elem: '#searchFilmReleaseTime'
            ,type: 'date'
        });

        var cols = [[
             {field:'filmName', title:'影片名称', width:200, edit: 'text', templet:'<div>{{d.film.filmName}}</div>'}
            ,{field:'filmContent', title:'影片简介', width:510, edit: 'text', templet:'<div>{{d.film.filmContent}}</div>'}
            ,{field:'filmRunTime', title:'播放时长', width:160, templet:'<div>{{d.film.filmRunTime}}</div>'}
            ,{field:'filmReleaseTime', title:'上映时间', width:160, templet:'<div>{{d.film.filmReleaseTime}}</div>'}
            ,{field:'filmStatus', title:'影片状态', width:160,templet:function (data) {
                    var filmStatus = data.film.filmStatus;
                    if (filmStatus == 0) {
                        return "上架";
                    } else if (filmStatus == 1) {
                        return "下架";
                    }
                }}
            ,{field:'rankNumber', title:'排行名次', width:160, sort: true}
            ,{fixed: 'right', title:'操作', toolbar: '#test-table-toolbar-barDemo', width:182}
        ]];

        table.render({
            elem: '#test-table-toolbar'
            ,url: '${pageContext.request.contextPath}/back/filmRankList'
            ,where:{
                pageNum:'1',
                pageSize:'10',
                filmName:null,
                filmReleaseTime:null,
            }
            ,toolbar: '#test-table-toolbar-toolbarDemo'
            ,title: '影片排行数据表'
            ,cols: cols
            ,page: true
            ,parseData: function (res) {
                return {
                    "code":0,
                    "msg":"",
                    "count":res.total,
                    "data":res.list
                }
            }
        });

        // 监听行工具事件
        // 向上
        table.on('tool(test-table-toolbar)',function (obj) {
            var data = obj.data; //获取当前行数据
            var filmId = data.film.filmId;
            var Number = data.rankNumber;
            if (obj.event === 'up') {
                if (Number == 1) {
                    alert("已排行第一")
                } else {
                    var rankNumber = Number - 1;
                    updateRankNumber(filmId,rankNumber);
                }

            } else if (obj.event === 'down') {
                var rankNumber = Number + 1;
                updateRankNumber(filmId,rankNumber);
            } else if (obj.event === 'edit') {
                index = layer.open({
                    type : 1,
                    area : ['350px','300px'],
                    content : $("#edit_from")
                });
                // 表单初始赋值
                form.val('example',{
                    "filmId" : filmId,
                    "rankNumber" : Number
                });
            }
        });

        // 输入修改
        $(document).on("click","#onEditFilmRank",function () {
            var filmId = $("#example input[name=filmId]").val();
            var rankNumber = $("#example input[name=rankNumber]").val();

            updateRankNumber(filmId,rankNumber);
        });


        // 执行修改函数
        function updateRankNumber(filmId,rankNumber) {
            $.ajax({
                type:'put'
                ,url:'${pageContext.request.contextPath}/back/updateFilmRankNumber'
                ,data:{filmId:filmId,rankNumber:rankNumber}
                ,dataType:'json'
                ,success:function (result) {
                    if (result == true) {
                        window.location.reload();
                    } else {
                        layer.alert("修改失败");
                    }
                }
            })
        }


        //多条件查询
        $(document).on("click","#search",function () {
            var filmName = $("#searchFilmName").val();
            var filmReleaseTime = $("#searchFilmReleaseTime").val();
            table.render({
                elem: '#test-table-toolbar'
                ,url: '${pageContext.request.contextPath}/back/filmRankList'
                ,where: {
                    pageNum:'1',
                    pageSize:'10',
                    filmName:filmName,
                    filmReleaseTime:filmReleaseTime
                }
                ,toolbar: '#test-table-toolbar-toolbarDemo'
                ,title: '影片排行数据表'
                ,cols: cols
                ,page: true
                ,parseData: function (res) {
                    return {
                        "code":0,
                        "msg":"",
                        "count":res.total,
                        "data":res.list
                    }
                }
            });
        })

    });
</script>
    <!-- 放置修改元素，默认隐藏 -->
    <div id="edit_from" style="display:none;width:300px;margin-top: 20px">
        <form class="layui-form" action="javascript:return false;" lay-filter="example" id="example">
            <div class="layui-form-item" style="display:none">
                <label class="layui-form-label">影片编号</label>
                <div class="layui-input-block">
                    <input type="text" name="filmId" lay-verify="filmId" autocomplete="off"
                           class="layui-input" readonly="readonly">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排行名次</label>
                <div class="layui-input-block">
                    <input type="text" name="rankNumber" lay-verify="rankNumber" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" id="onEditFilmRank">确定修改</button>
                </div>
            </div>
        </form>
    </div>
</body>
</html>
